<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>弹层组件文档 - layui.layer</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>
		body .demo-class .layui-layer-title {
			background: #c00;
			color: #fff;
			border: none;
		}

		body .demo-class .layui-layer-btn {
			border-top: 1px solid #E9E7E7
		}

		body .demo-class .layui-layer-btn a {
			background: #333;
		}

		body .demo-class .layui-layer-btn .layui-layer-btn1 {
			background: #999;
		}
	</style>
</head>

<body style="margin:100px ;">

	<div id="id">我再这里</div>

	<script>

		layui.use('rate', function () {

			/**!*
		 如果是页面层
		 */
			// layer.open({
			// 	type: 1,
			// 	title: "jiangxu",
			// 	skin: 'layui-layer-molv',  //layui-layer-lan  layui-layer-molv
			// 	content: '传入任意的文本或html' //这里content是一个普通的String
			// });


			// layer.open({
			// 	type: 1,
			// 	content: layui.$('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			// });


			//Ajax获取
			// $.post('url', {}, function (str) {
			// 	layer.open({
			// 		type: 1,
			// 		content: str //注意，如果str是object，那么需要字符拼接。
			// 	});
			// });


			/****!*
			 如果是iframe层
			 */
			// layer.open({
			// 	type: 2,
			// 	content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
			// });


			/**!*
			 如果是用layer.open执行tips层
			 */
			// layer.open({
			// 	type: 4,
			// 	content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
			// });

			//单个使用
			// layer.open({
			// 	skin: 'demo-class',  //自定义样式
			// 	area: ['500px', '300px']
			// });
			//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
			// layer.config({
			// 	skin: 'demo-class'
			// })


			// //eg1
			// layer.alert('酷毙了', { icon: 1 });
			// //eg2
			// layer.msg('不开心。。', { icon: 5 });


			//eg1
			// var index = layer.load();
			// //eg2
			// var index = layer.load(1); //换了种风格
			//eg3
			// var index = layer.load(2, { time: 10 * 1000 }); //又换了种风格，并且设定最长等待10秒 
			// //关闭
			// layer.close(index);


			//layer.alert(content, options, yes) - 普通信息框
			//eg1
			// layer.alert('只想简单的提示');
			//eg2
			// layer.alert('加了个图标', { icon: 1 }); //这时如果你也还想执行yes回调，可以放在第三个参数中。
			// //eg3
			// layer.alert('有了回调', function (index) {
			// 	//do something

			// 	layer.close(index);
			// });


			//layer.confirm(content, options, yes, cancel) - 询问框
			//eg1
			// layer.confirm('is not?', { icon: 3, title: '提示' }, function (index) {
			// 	//do something

			// 	layer.close(index);
			// });
			//eg2
			// layer.confirm('is not?', function (index) {
			// 	//do something

			// 	layer.close(index);
			// });


			//layer.msg(content, options, end) - 提示框
			//eg1
			// layer.msg('只想弱弱提示');
			// //eg2
			// layer.msg('有表情地提示', { icon: 6 });
			//eg3
			// layer.msg('关闭后想做些什么', function () {
			// 	//do something
			// });
			//eg
			// layer.msg('同上', {
			// 	icon: 1,
			// 	time: 2000 //2秒关闭（如果不配置，默认是3秒）
			// }, function () {
			// 	//do something
			// });


			//layer.load(icon, options) - 加载层
			//eg1
			// var index = layer.load();
			// //eg2
			// var index = layer.load(1); //换了种风格
			//eg3
			// var index = layer.load(2, { time: 10 * 1000 }); //又换了种风格，并且设定最长等待10秒 
			//关闭
			// layer.close(index);


			//layer.close(index) - 关闭指定层
			//当你想关闭当前页的某个层时
			// var index = layer.open();
			// var index = layer.alert();
			// var index = layer.load();
			// var index = layer.tips();
			// //正如你看到的，每一种弹层调用方式，都会返回一个index
			// layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可

			// //如果你想关闭最新弹出的层，直接获取layer.index即可
			// layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

			// //当你在iframe页面关闭自身时
			// var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			// parent.layer.close(index); //再执行关闭 

			// //关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
			// layer.close(index, function () {
			// 	//do something
			// });


			//layer.closeAll(type) - 关闭所有层
			// layer.closeAll(); //疯狂模式，关闭所有层
			// layer.closeAll('dialog'); //关闭信息框
			// layer.closeAll('page'); //关闭所有页面层
			// layer.closeAll('iframe'); //关闭所有的iframe层
			// layer.closeAll('loading'); //关闭加载层
			// layer.closeAll('tips'); //关闭所有的tips层    

			// //关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
			// layer.closeAll('loading', function () { //关闭 loading 并执行回调
			// 	//do something
			// });
			// layer.closeAll(function () { //关闭所有层并执行回调
			// 	//do something
			// });


			//layer.prompt(options, yes) - 输入层
			//prompt层新定制的成员如下
			// {
			//   formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
			//   value: '', //初始时的值，默认空字符
			//   maxlength: 140, //可输入文本的最大长度，默认500
			// }

			//例子1
			// layer.prompt(function (value, index, elem) {
			// 	alert(value); //得到value
			// 	layer.close(index);
			// });

			//例子2
			// layer.prompt({
			// 	formType: 2,
			// 	value: '初始值',
			// 	title: '请输入值',
			// 	area: ['800px', '350px'] //自定义文本域宽高
			// }, function (value, index, elem) {
			// 	alert(value); //得到value
			// 	layer.close(index);
			// });


			//layer.tab(options) - tab层
			layer.tab({
				area: ['600px', '300px'],
				tab: [{
					title: 'TAB1',
					content: '内容1'
				}, {
					title: 'TAB2',
					content: '内容2'
				}, {
					title: 'TAB3',
					content: '内容3'
				}]
			});

		});
	</script>

</body>

</html>